<template>
  <div>
    <el-button type="primary" @click="queryRequest">刷新</el-button>
    <el-table stripe :data="tableData" border>
      <el-table-column prop="question.id" label="ID" fixed/>
      <el-table-column prop="subject.name" label="学科"/>
      <el-table-column prop="type" label="题目类型"/>
      <el-table-column prop="question.content" label="题干"/>
      <el-table-column prop="level" label="难度"/>
      <el-table-column label="操作" fixed="right" min-width="150">
        <template slot-scope="scope">
          <el-button type="danger" plain @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>

export default {
  name: "ExamPaperPage",
  data() {
    return {
      tableData: [],
    }
  },
  mounted() {
    this.queryRequest();
  },
  methods: {
    queryRequest() {
      const url = '/questions';
      this.axios.get(url).then(resp => {
        this.tableData = resp.data;
      })
    },
    handleDelete(index, row) {
      this.$confirm('确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 点击确认
        const url = `/questions/${row.question.id}`;
        this.axios.delete(url).then(resp => {
          if (resp.code === 200) {
            this.$message({
              type: "success",
              message: '删除成功',
              center: true,
            });
          }
        })
        this.queryRequest();
      }).catch(() => {
        // 点击取消
      });
    }
  },
}
</script>

<style scoped>
.el-input {
  width: 200px;
  margin-right: 10px;
}

.el-table {
  margin: 10px 0;
}
</style>